<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <style>
    .green {
      color: lightgreen;
    }
    .name {
      font-size: 30px;
      cursor: pointer;
      user-select: none;
    }
  </style>

  <body>
    <div id="app">
      浩楠的颜值：{{count}}
      <button @click="add">+</button>
      <button @click="sub">-</button>
      <input type="text" @keydown.enter="enter" v-model="inpVal" />

      <img v-bind:src="imgUrl" alt="" />
      <div
        v-bind:class="{green: isGreen}"
        class="name"
        @click="toGreen"
        v-bind:class=""
      >
        老王
      </div>
      <div :class="{name: isOK}">杰哥</div>
    </div>

    <script>
      let app = new Vue({
        el: '#app',
        data: {
          count: 1,
          inpVal: '',
          imgUrl: 'https://img.ivsky.com/img/tupian/t/201402/18/pikachu.jpg',
          isGreen: false,
          isOK: true
        },
        methods: {
          add: function () {
            this.count++
            this.inpVal = this.count
          },
          sub: function () {
            this.count > 0 ? this.count-- : null
          },
          enter: function () {
            console.log(this.inpVal)
          },
          toGreen: function () {
            this.isGreen = !this.isGreen
          }
        }
      })
    </script>
  </body>
</html>
